<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/> 
		<title>全部商品</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/plusClick.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/core.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var goodsCategoryId = 0;
			var sort = 0;
			var minPrice = 0;
			var maxPrice = 0;
			var sortTitle="智能排序";
			var goodsCategoryTitle="全部分类";
			if ( getvl('title') != "" ) {
				goodsCategoryTitle = getvl('title');
			}
			if ( getvl('goodsCategoryId') != "" ) {
				goodsCategoryId = getvl('goodsCategoryId');
			}
			//获取商品类别 
			mui.get(urlcore + '/goodsCategory/jpa/page',
        		{
        			pageNum:  1,
        			pageSize:  999999999
        		},function(data){
                    if(data.success==true){
                    	var htmlsrc = '<li data-type="0" onclick="selectALL(this,0)">全部分类</li>';
                        $.each(data.data.list, function(i, da) {
                        	htmlsrc += '<li data-type="'+da.id+'" onclick="selectALL(this,'+da.id+')">'+da.title+'</li>';
                        });
						$('#all_type_ul').html(htmlsrc);
						
						$('.silder_bank').fadeOut('fast');
						$('.all_type').slideUp('fast');
						$('.ordering').hide();
						$('.catmenu ul li').css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
						$('.catmenu ul li').next().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
						$('.catmenu ul li').eq(0).find('span').text(goodsCategoryTitle);							
						
                    }else{
                    	mui.toast(data.msg);
                    }
				},'json'
			);
			
			
		    //rollMark(是否滚动 查询 0是 1否)
			var rollMark = 0;
			var pageNum = 1;
		    var pageSize = 5;
		    loadData();
			
			/*监听加载更多*/
			$(window).scroll(function(){
				if (getScrollTop() + getClientHeight() == getScrollHeight()) {
					if (rollMark == 1) {
						return;
					}
					pageNum++;
					loadData();
				}
			});
			function loadData() {
				if (Number(minPrice) <0 || Number(maxPrice) <0 || Number(minPrice) > Number(maxPrice)) {
					mui.toast("价格区间不合理");
					return;
				}
				mui.getJSON(urlcore + '/goods/jpa/page',
	        		{
	        			pageNum:  pageNum,
	        			pageSize: pageSize,
	        			goodsCategoryId: goodsCategoryId,
	        			sort: sort,
	        			minPrice:minPrice,
	        			maxPrice:maxPrice,
	        			type: 1
	        		},function(data){
	                    if(data.success == true){
							if (data.data.isLastPage){
								/*停止滚动加载请求*/
								rollMark = 1;
							}	   
							var membertype = $('#currentId').text();
	                        $.each(data.data.list, function(i, da) {
	                        	var htmlda = 
		                        	'<li id="4.3.0GoodsDetails.html?id='+da.id+'" onclick="clicked(this.id);">'+
									'	<img data-original="'+attUrl(da.imagePath)+'"/>'+
									'	<div class="choice_desc">'+da.title+'</div>'+
									'	<div class="choice_money">'+
									'		<span>&yen;'+da.price+'</span>'+
									'		<span>&yen;'+da.originalPrice+'</span>'+
									'	</div>'+
									'</li>';
	                        	$('.mm_list').append(htmlda);
	                        	
                    			$("img").lazyload({
									effect: "fadeIn"
								});
	                        });
	                    }else{
	                    	mui.toast(data.msg);
	                    }
					}
        		);				
			}
			
		</script>
		
	</head>

	<body>
		<header>
			<a class="header_btn_left_back btn_back" onclick="mback(true);"></a>
			全部商品
		</header>
		
		<div class="category_menu">
			<div class="catmenu">
				<ul>
					<li class="fenlei" data-Fenlei="fenlei" onclick="selectTypes(this)" id="0"><span>全部分类</span><img src="../img/select_down.png" /></li>
					<li class="paixu" data-Fenlei="paixu" onclick="selectTypes(this)" id="0"><span>智能排序</span><img src="../img/select_down.png" /></li>
				</ul>
			</div>
			
			<div class="all_type">
				<ul id="all_type_ul">
					<!--<li data-type="1" onclick="selectALL(this)">服饰类</li>
					<li data-type="2" onclick="selectALL(this)">饰品类</li>
					<li data-type="3" onclick="selectALL(this)">鞋类</li>
					<li data-type="4" onclick="selectALL(this)">包类</li>
					<li data-type="5" onclick="selectALL(this)">护肤品</li>
					<li data-type="6" onclick="selectALL(this)">化妆品</li>
					<li data-type="7" onclick="selectALL(this)">日用品</li>
					<li data-type="8" onclick="selectALL(this)">家居用品</li>-->
				</ul>
			</div>
			<div class="ordering">
				<ul>
					<li onclick="selectPrice(this,1)">价格从高到低</li>
					<li onclick="selectPrice(this,2)">价格从低到高</li>
					<li class="Xiala_input">
						价格区间：
						<input id="minPrice" type="text" placeholder="最低值" />
						——
						<input id="maxPrice" type="text" placeholder="最高值" />
						<input type="submit"  onclick="selectRrange()" value="确定" />
					</li>
				</ul>
			</div>
		</div>
		<!--下拉背景-->
		<div class="silder_bank"></div>
		
		<div class="choice_list margin110">
			<!--经典搭配-->
			<ul style="width: 100%;" class="mm_list">
				<!--<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi1.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>&yen;2630.00</span>
						<span>&yen;2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi2.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>&yen;2630.00</span>
						<span>&yen;2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi3.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>&yen;2630.00</span>
						<span>&yen;2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi4.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>&yen;2630.00</span>
						<span>&yen;2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi5.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>&yen;2630.00</span>
						<span>&yen;2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi6.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>&yen;2630.00</span>
						<span>&yen;2930.00</span>
					</div>
				</li>-->
			</ul>
		</div>
		
		<!--修改后-->
		<!--<div class="choice_list margin110">
			<ul style="width: 100%;" class="mm_list">
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<div class="qq_goods_img" style="background: url(../img/shangpi1.png) no-repeat center; background-size: cover;"></div>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>￥2630.00</span>
						<span>￥2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<div class="qq_goods_img" style="background: url(../img/shangpi1.png) no-repeat center; background-size: cover;"></div>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>￥2630.00</span>
						<span>￥2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi3.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>￥2630.00</span>
						<span>￥2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi4.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>￥2630.00</span>
						<span>￥2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi5.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>￥2630.00</span>
						<span>￥2930.00</span>
					</div>
				</li>
				<li id="4.3.0GoodsDetails.html" onclick="clicked(this.id);">
					<img data-original="../img/shangpi6.png"/>
					<div class="choice_desc">简约优雅古典风格搭配简约优雅古典风格搭配简约优雅古典风格搭配 </div>
					<div class="choice_money">
						<span>￥2630.00</span>
						<span>￥2930.00</span>
					</div>
				</li>
			</ul>
		</div>-->
		
		
		
	</body>
	<script type="text/javascript">
		var types = getQueryString('type');
		$('.all_type ul li').each(function(){
			if ($(this).attr('data-type') == types) {
				goodsCategoryTitle = $(this).text();
				$('.catmenu ul li').eq(0).find('span').text(goodsCategoryTitle);
			}
		});
		
		function selectALL(obj,id){
			rollMark = 0;
			pageNum = 1;
			minPrice = 0;
			maxPrice = 0;
			$('#minPrice').val("");
			$('#maxPrice').val("");
			$('.mm_list').html("");
			$('.fenlei').attr('id', id);
			var sort = $('.paixu').attr('id');
			goodsCategoryId = id;
			sort = sort;
			loadData();

			$('.silder_bank').fadeOut('fast');
			$('.all_type').slideUp('fast');
			$('.ordering').hide();
			$('.catmenu ul li').css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
			$('.catmenu ul li').next().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
			goodsCategoryTitle = $(obj).text();
			$('.catmenu ul li').eq(0).find('span').text(goodsCategoryTitle);
		}
		
		function selectPrice(obj,type){
			rollMark = 0;
			pageNum = 1;
			$('.mm_list').html("");
			$('.paixu').attr('id', type);
			goodsCategory = $('.fenlei').attr('id');
			sort = type;
			loadData();
			
			$('.silder_bank').fadeOut('fast');
			$('.ordering').slideUp('fast');
			$('.all_type').hide();
			$('.catmenu ul li').css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
			$('.catmenu ul li').prev().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
			sortTitle = $(obj).text();
			$('.catmenu ul li').eq(1).find('span').text(sortTitle);
		}
		
		//价格区间搜索
		function selectRrange(){
			rollMark = 0;
			pageNum = 1;
			$('.mm_list').html("");
			minPrice = $('#minPrice').val();
			maxPrice = $('#maxPrice').val();
			var type = $('.paixu').attr('id');
			goodsCategory = $('.fenlei').attr('id');
			sort = type;
			loadData();
			$('.silder_bank').fadeOut('fast');
			$('.all_type').slideUp('fast');
			$('.ordering').hide();
			$('.catmenu ul li').css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
			$('.catmenu ul li').prev().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
			$('.catmenu ul li').eq(1).find('span').text(sortTitle);
		}
		
		function selectTypes(obj){
			
			var Fenleis = $(obj).attr('data-Fenlei');
			if(Fenleis == 'fenlei'){
				//$('.fenlei').attr('id', );
				if ($('.all_type').css('display') == 'none') {
					$('.silder_bank').fadeIn('fast');
					$('.all_type').slideDown('fast');
					$('.ordering').hide();
					$(obj).css({'color':'#5308B4'}).find('img').attr('src','../img/select_up.png');
					$(obj).next().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
				} else {
					$('.silder_bank').fadeOut('fast');
					$('.all_type').slideUp('fast');
					$('.ordering').hide();
					$(obj).css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
					$(obj).next().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
				}
			} else if(Fenleis == 'paixu'){
				if ($('.ordering').css('display') == 'none') {
					$('.silder_bank').fadeIn('fast');
					$('.ordering').slideDown('fast');
					$('.all_type').hide();
					$(obj).css({'color':'#5308B4'}).find('img').attr('src','../img/select_up.png');
					$(obj).prev().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
				} else {
					$('.silder_bank').fadeOut('fast');
					$('.ordering').slideUp('fast');
					$('.all_type').hide();
					$(obj).css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
					$(obj).prev().css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
				}
			}
		}
		
		$('.silder_bank').click(function(){
			$('.silder_bank').fadeOut('fast');
			$('.all_type').fadeOut('fast');
			$('.ordering').fadeOut('fast');
			$('.catmenu ul li').css({'color':'#333333'}).find('img').attr('src','../img/select_down.png');
		});
		
	</script>
	<script src="../js/immersed.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" src="../js/DataLazyLoad.js"></script>
    <script type="text/javascript" charset="utf-8">
//      $(function () {
//          //Call DataLazyLoad
//          $(".mm_list").DataLazyLoad({ load: function (page, unLocked) {
//              var html = '';
//              var max = 10;
//              //Generate the data
//              for (var i = 0; i < 10; i++) {
//                  html += '<li>Page: ' + page + ', Data Index: ' + i + ' </li>';
//              }
//              $(html).appendTo('.mm_list');
//              //Check whether to end
//              page = page >= max ? 0 : page + 1;
//              //To prevent repeated load, The first parameter to the next page, No page is 0
//              unLocked(page);
//              if (page == 0) {
//                  $("<li class = 'h2'>The End!</li>").appendTo('.mm_list');
//              }
//          }
//          });
//      });
    </script>
</html>